<!--  -->
<template>
  <div class="model-wrap">
    <div class="header">
      <div class="header-content-box">
        <div class="header-left">
          <div class="title">模型</div>
        </div>
        <div class="header-right">
          <div class="action-box">
            <div class="header-button basebtn">
              <button class="basebtn-common lan" @click="clickNewModelFun()">新建模型</button>
            </div>
          </div>
        </div>
      </div>
      <ul class="nav-list">
        <li class="main-nav-list nav-left clearfix">
          <ul class="main-nav-list-container">
            <li class="nav-item link-item" :class="{'active': activeTab === 1}" @click="toggleActive(1)">
              <i class="icon icon-open-ico"></i>
              公开模型
              </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">
              <i class="icon icon-my-ico"></i>
              我的模型
              </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="content">
      <div v-if="activeTab === 1">
        <div class="category-header">
          <ul>
            <li class="category-item" :class="{'active-category': curSelectedCategory === 'ALL'}" @click="selectAll">全部</li>
            <li class="category-item" :class="{'active-category': curSelectedCategory === item.id}" v-for="item in topFive" :key="item.id" @click="selectFilterLabel(item)">{{item.name}}</li>
            <li class="category-item">
              <el-popover
                placement="bottom"
                trigger="click"
                v-model="labelVisible"
                width="800">
                <div class="dataset-popover">
                  <ul class="navs-detail-left">
                    <li class="item" :class="{ 'active': openAllLabelIndex == index}" v-for="(item, index) in openAllLabel" :key="item.id" @click="showSeLabel(index)">{{item.name}}</li>
                  </ul>
                  <ul class="navs-detail-right">
                    <li class="items" v-for="(item) in openAllLabelShow" :key="item.id">
                      <h4 class="tit">{{item.name}}</h4>
                      <ul class="detail-items">
                        <li class="detail-item" :class="{'active-category': curSelectedCategory === list.id}" v-for="(list, num) in item.childList" :key="num" @click="selectFilterLabel(list)">{{list.name}}</li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="dataset-navs-detail" slot="reference" @click="labelVisible = !labelVisible">
                  <span>更多分类</span>
                </div>
              </el-popover>
            </li>
            <li class="datast-total">共{{openTotalNum}}个模型</li>
          </ul>
        </div>
        <load-data v-show="loadState"></load-data>
        <ul class="data-list">
          <li class="item" v-for="(item, index) in openPublicModels" @click="clickOpenFun(item)" :key="index">
            <div class="item-top">
              <div class="item-bg">
                <img :src="item.coverUrl ? item.coverUrl : dattSetImgUrl" alt="">
              </div>
              <ul class="item-tag" v-if="item.categoryList && item.categoryList.length>0">
                <li class="tag-list" v-for="(categoryitem, categoryindex) in item.categoryList" :key="categoryindex">{{categoryitem.name}}</li>
              </ul>
            </div>
            <div class="item-con">
              <h4 class="tit">{{item.account}}/{{item.modelName}}</h4>
              <p class="text-con">{{item.modelIntroduction}}</p>
              <ul class="list-box">
                <li class="list-item">
                  <i class="icon icon-user"></i>{{item.usedCount}}人使用
                </li>
                <li class="list-item">
                  <i class="icon icon-look"></i>{{item.userProjectAttentionCount}}人关注
                </li>
              </ul>
            </div>
          </li>
        </ul>
        <div class="loadmore" v-if="!loadState && hasNextPagePublic">
          <p class="loadmore-box" @click="loadMorePublic">
            <i v-show="loadingMorePublic" class="el-icon-loading"></i>
            <span v-show="!loadingMorePublic">加载更多...</span>
          </p>
        </div>
        <div class="no-data-box" v-show="!loadState && openPublicModels.length === 0">
          <div class="no-data">
            <img src="@/common/image/nocontent.png">
            <p class="no-data-title">暂无数据</p>
          </div>
        </div>
      </div>
      <div v-if="activeTab === 2">
        <div class="category-header">
          <ul>
            <li class="category-item" :class="{'active-category': curSelectedMyModel === 0}" @click="selectModelType(0)">我上传的</li>
            <li class="category-item" :class="{'active-category': curSelectedMyModel === 1}" @click="selectModelType(1)">我关注的</li>
          </ul>
        </div>
        <div class="upload-table" v-if="curSelectedMyModel === 0">
          <el-table
          :data="fileList"
          style="width: 100%"
          v-loading="tableLoad"
          :header-row-class-name="handleTableHeaderclass">
            <el-table-column
              prop="modelName"
              width="200"
              label="模型名称">
              <template slot-scope="scope">
                <span style="color: #2196F3" class="table-con table-hand" @click="clickTableNameFun(scope.row)">{{ scope.row.modelName ? scope.row.modelName : '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="modelIntroduction"
              label="简介">
              <template slot-scope="scope">
                <div class="table-con elli">{{ scope.row.modelIntroduction ? scope.row.modelIntroduction : '--' }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="language"
              width="150"
              label="编程语言">
              <template slot-scope="scope">
                <span class="table-con">{{ scope.row.language ? scope.row.language : '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="frameWork"
              width="220"
              label="算法框架">
              <template slot-scope="scope">
                <span class="table-con">{{ scope.row.frameWork ? scope.row.frameWork : '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              width="180"
              label="创建时间">
              <template slot-scope="scope">
                <span class="table-con">{{ scope.row.createTime ? new Date(scope.row.createTime).Format("yyyy-MM-dd hh:mm:ss") : '--' }}</span>
                <!-- 1560320891262 -->
                <!-- <span>{{ new Date(scope.row.createTime).Format("yyyy-MM-dd hh:mm:ss") }}</span> -->
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="size"
              label="操作"
              width="160">
              <template slot-scope="scope">
                <span class="table-con table-operation">
                  <a class="table-hand">公开发布</a>
                  <a class="table-hand" @click="deleteModel(scope.row)">删除</a>
                </span>
              </template>
            </el-table-column> -->
          </el-table>
          <div class="basePagenate">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-size="tablePageSize"
              :current-page="tablePageNumber"
              :total="tableTotalPage"
              layout="prev, pager, next">
            </el-pagination>
          </div>
        </div>
        <div class="look-model" v-else>
          <load-data v-show="loadState"></load-data>
          <ul class="look-data-list">
            <li class="look-item" v-for="(item, index) in openLookModels" :key="index" @click="clickOpenFun(item)">
              <div class="item-top">
                <div class="item-bg">
                  <img :src="item.coverUrl ? item.coverUrl : dattSetImgUrl" alt="">
                </div>
                <ul class="item-tag" v-if="item.categoryList && item.categoryList.length>0">
                  <li class="tag-list" v-for="(categoryitem, categoryindex) in item.categoryList" :key="categoryindex">{{categoryitem.name}}</li>
                </ul>
              </div>
              <div class="item-con">
                <h4 class="tit">{{item.account}}/{{item.modelName}}</h4>
                <p class="text-con">{{item.modelIntroduction}}</p>
                <ul class="list-box">
                  <li class="list-item">
                    <i class="icon icon-user"></i>{{item.usedCount}}人使用
                  </li>
                  <li class="list-item">
                    <i class="icon icon-look"></i>{{item.userProjectAttentionCount}}人关注
                  </li>
                </ul>
              </div>
            </li>
          </ul>
          <div class="loadmore" v-if="!loadState && hasNextPageLook">
            <p class="loadmore-box" @click="loadMoreLook">
              <i v-show="loadingMoreLook" class="el-icon-loading"></i>
              <span v-show="!loadingMoreLook">加载更多...</span>
            </p>
          </div>
          <div class="no-data-box" v-show="!loadState && openLookModels.length === 0">
            <div class="no-data">
              <img src="@/common/image/nocontent.png">
              <p class="no-data-title">暂无数据</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTopFiveRelationCategory, getCategoryTreeByType } from '@/api/category'
import { getPublicModels, getAttentionModels, getUserOwnModels } from '@/api/model'
import dataSetImg from '@/common/image/dataset.jpg'
import loadData from '@/base/load'
import qs from 'qs'
export default {
  data () {
    return {
      // 模型默认图片
      dattSetImgUrl: dataSetImg,
      // 标签集合显示
      labelVisible: false,
      // 标签树分类 index
      openAllLabelIndex: 0,
      topFive: [],
      // 标签分类树信息
      openAllLabel: [],
      // 标签树分类显示
      openAllLabelShow: [],
      curSelectedMyModel: 0,
      fileList: [],
      // 公开模型列表
      openPublicModels: [],
      // 我关注的模型列表
      openLookModels: [],
      // 表格每页条数
      tablePageSize: 10,
      // 表格当前页
      tablePageNumber: 1,
      // 表格总条目
      tableTotalPage: 0,
      finished: false,
      // 当前页
      pageNumberPublic: 1,
      // 每页显示条数
      pageSizePublic: 16,
      // 是否有下一页（公开）
      hasNextPagePublic: false,
      hasNextPageLook: false,
      // 总条数
      openTotalNum: '-',
      loadingMorePublic: false,
      loadingMoreLook: false,
      bottom: false,
      // 当前页
      pageNumberLook: 1,
      // 每页显示条数
      pageSizeLook: 12,
      // 数据加载过程
      loadState: true,
      tableLoad: false
    }
  },
  computed: {
    // 当前激活Tab页
    activeTab: {
      get: function () {
        if (this.$route.query.active) {
          return Number(this.$route.query.active)
        } else {
          return 1
        }
      }
    },
    // 当前选择category
    curSelectedCategory: {
      get: function () {
        if (this.$route.query.category && this.$route.query.category !== 'ALL') {
          return Number(this.$route.query.category)
        } else {
          return 'ALL'
        }
      }
    }
  },

  beforeMount () {
    window.addEventListener('scroll', this.handleScroll)
  },

  mounted () {
    if (this.$route.query.active && Number(this.$route.query.active) === 2) {
      this.toggleActive(2)
    } else {
      this.toggleActive(1)
    }
  },

  methods: {
    toggleActive (val) {
      if (val === 1) {
        this.openPublicModels = []
        this.pageNumberPublic = 1
        this.hasNextPagePublic = false
        this.$router.push({ path: '/modellump', query: { active: 1, category: 'ALL' } })
        this._getTopFiveRelationCategory()
        this._getCategoryTreeByType()
        this._getPublicModels()
      } else {
        this.openLookModels = []
        this.pageNumberLook = 1
        this.hasNextPageLook = false
        this._getAttentionModels()
        this.curSelectedMyModel = 0
        this._getUserOwnModels()
        this.$router.push({ path: '/modellump', query: { active: 2 } })
      }
    },
    // 显示二级标签内容
    showSeLabel (index) {
      this.openAllLabelIndex = index
      this.openAllLabelShow = this.openAllLabel[index].childList
    },
    selectAll () {
      this.openPublicModels = []
      // 页码
      this.pageNumberPublic = 1
      // 获取列表
      this._getPublicModels()
      this.$router.push({ path: '/modellump', query: { active: 1, category: 'ALL' } })
    },
    // 获取关联最多的5个标签
    _getTopFiveRelationCategory () {
      const data = qs.stringify({
        type: 3
      })
      getTopFiveRelationCategory(data).then(res => {
        if (res.message.code === 0) {
          this.topFive = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取分类树信息
    _getCategoryTreeByType () {
      const type = 1
      getCategoryTreeByType(type).then(res => {
        if (res.message.code === 0) {
          this.openAllLabel = res.data
          if (res.data.length > 0 && res.data[0].childList) this.openAllLabelShow = res.data[0].childList
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 选中过滤标签
    selectFilterLabel (item) {
      this.labelVisible = false
      this.openPublicModels = []
      this.pageNumberPublic = 1
      this.$router.push({ path: '/modellump', query: { active: 1, category: item.id } })
      // 获取列表
      this._getPublicModels(item.id)
      let isHas = false
      this.topFive.forEach(list => {
        if (list.id === item.id) isHas = true
      })
      if (!isHas && this.topFive.length === 5) {
        this.topFive.push(item)
      } else if (!isHas && this.topFive.length === 6) {
        this.topFive.pop()
        this.topFive.push(item)
      }
    },
    selectModelType (type) {
      this.curSelectedMyModel = type
    },
    handleTableHeaderclass () {
      return 'table-head-th'
    },
    // 分页
    handleSizeChange (val) {
      this.tablePageSize = val
      this.tablePageNumber = 1
    },
    handleCurrentChange (val) {
      this.tablePageNumber = val
      this._getUserOwnModels()
    },
    // 删除模型
    deleteModel (row) {},
    // 上传名称点击
    clickTableNameFun (row) {
      this.$router.push({ path: '/modellump/privatedetailed', query: { active: 1, modelId: row.id, modelName: row.modelName } })
    },
    // 公开模型详情
    clickOpenFun (row) {
      this.$router.push({ path: '/modellump/opendetailed', query: { active: 1, modelId: row.id, modelName: row.modelName, userId: row.userId, type: row.type } })
    },
    // 新建模型
    clickNewModelFun () {
      this.$router.push({ path: '/modellump/modelnew' })
    },
    // 处理滚动事件
    handleScroll () {
      let footerHeight = document.getElementById('footer').clientHeight
      let scrollY = window.scrollY
      let visible = document.documentElement.clientHeight
      let pageHeight = document.documentElement.scrollHeight - (footerHeight / 2)
      let bottomOfPage = visible + scrollY >= pageHeight
      this.bottom = bottomOfPage || pageHeight < visible
    },
    loadMorePublic () {
      this.loadingMorePublic = true
      this.pageNumberPublic++
      this._getPublicModels()
    },
    loadMoreLook () {
      this.loadingMoreLook = true
      this.pageNumberLook++
      this._getAttentionModels()
    },
    // 公开模型
    _getPublicModels (categoryId) {
      let query = ''
      if (categoryId) {
        query = `?categoryId=${categoryId}&pageNumber=${this.pageNumberPublic}&pageSize=${this.pageSizePublic}`
      } else {
        query = `?pageNumber=${this.pageNumberPublic}&pageSize=${this.pageSizePublic}`
      }
      this.finished = true
      this.loadState = true
      getPublicModels(query).then(res => {
        this.loadState = false
        this.loadingMorePublic = false
        if (res.message.code === 0) {
          this.hasNextPagePublic = res.data.hasNextPage
          this.openPublicModels = this.openPublicModels.concat(res.data.list)
          this.openTotalNum = res.data.total
          if (this.hasNextPagePublic) {
            this.finished = false
          }
        } else {
          return false
        }
      })
    },
    // 我关注的模型列表
    _getAttentionModels () {
      let query = ''
      query = `?pageNumber=${this.pageNumberLook}&pageSize=${this.pageSizeLook}`
      this.finished = true
      getAttentionModels(query).then(res => {
        this.loadingMoreLook = false
        if (res.message.code === 0) {
          this.hasNextPageLook = res.data.hasNextPage
          this.openLookModels = this.openLookModels.concat(res.data.list)
          // this.openTotalNum = res.data.total
          if (this.hasNextPageLook) {
            this.finished = false
          }
        } else {
          return false
        }
      })
    },
    // 我上传的
    _getUserOwnModels () {
      let query = ''
      query = `?pageNumber=${this.tablePageNumber}&pageSize=${this.tablePageSize}`
      this.tableLoad = true
      getUserOwnModels(query).then(res => {
        this.tableLoad = false
        if (res.message.code === 0) {
          this.fileList = res.data.list
          this.tableTotalPage = res.data.total
        } else {
          return false
        }
      })
    }
  },
  watch: {
    bottom: function (bottom) {
      if (this.finished === true) {
        return
      }
      if (bottom) {
        if (this.activeTab === 1) {
          this.loadingMorePublic = true
          this.pageNumberPublic++
          this._getPublicModels()
        } else {
          this.loadingMoreLook = true
          this.pageNumberLook++
          this._getAttentionModels()
          // if (this.curSelectedMyDataSet === 0) {
          //   this._getDataSetList()
          // } else {
          //   this._getUserDataSet(this.curSelectedMyDataSet)
          // }
        }
      }
    }
  },
  components: {
    loadData
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}

</script>
<style lang="stylus">
line-clamp(n)
  word-break normal
  word-wrap break-word
  overflow hidden
  text-overflow ellipsis
  display -webkit-box
  /*! autoprefixer: off */
  -webkit-box-orient vertical
  /* autoprefixer: on */
  -webkit-line-clamp n
.model-wrap
  display flex
  flex-flow column
  font-family PingFangSC-Regular
  .header
    background #f4f7f8
    .header-content-box
      display flex
      width 100%
      margin 0 auto
      max-width 1162px
      padding 20px 0
      .header-left
        width 50%
        .title
          font-weight 600
          font-size 28px
          color #2D323B
          letter-spacing 0
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
      .header-right
        width 50%
        .action-box
          display flex
          justify-content flex-end
    .nav-list
      width 100%
      position relative
      margin 0 auto
      max-width 1162px
      display flex
      .main-nav-list
        height 100%
        .main-nav-list-container
          display flex
          height 100%
          align-items flex-end
          .icon
            display inline-block
            width 30px
            height 50px
          .icon-open-ico
            background url(../../common/image/icon/model-open-ico.png) no-repeat center
            background-size 16px 16px
          .icon-my-ico
            background url(../../common/image/icon/model-i-icos.png) no-repeat center
            background-size 16px 16px
          .nav-item
            padding 0 10px
            font-weight 600
            font-size 14px
            display flex
            color #666
            justify-content center
            align-items center
            cursor pointer
            position relative
            margin 0
            >a
              color #666
              text-decoration none
              cursor pointer
            >a:before
              content ''
              position absolute
              top 0
              right 0
              bottom 0
              left 0
          .link-item
            padding 0 15px
            height 44px
        .nav-item.active
          font-weight bold
          color #2d323b
          background #fff
          box-shadow 0 14px 0 -10px #f3c922 inset
          border-radius 5px 5px 0 0
          .icon-open-ico
            background url(../../common/image/icon/model-open-icos.png) no-repeat center
            background-size 16px 16px
          .icon-my-ico
            background url(../../common/image/icon/model-i-icos.png) no-repeat center
            background-size 16px 16px
    .nav-left
      width 50%
    .nav-right
      width 50%
      display flex
      align-items center
      justify-content flex-end
      .header-button
        >button
          font-size 14px
          padding 4px 12px
  .content
    width 100%
    margin 0 auto
    max-width 1162px
    padding 20px 0
    .category-header
      padding 10px 0 20px
      .category-item
        display inline-block
        font-size 14px
        color #555555
        margin-right 22px
        cursor pointer
        &:hover
          color #2196f3
        &:hover .dataset-navs-detail
          &:after
            border-top: 8px solid #2D323B
      .datast-total
        z-index 20
        color #5555555
        display inline-block
        font-size 14px
        float right
      .active-category
        color #2196f3
    .data-list
      display flex
      flex-wrap wrap
      .item
        width 270px
        height 310px
        overflow hidden
        transition all 0.2s linear
        margin-bottom 25px
        margin-right 27px
        border 1px solid #E8E8E8
        border-radius 3px
        cursor pointer
        .item-top
          width 100%
          height 160px
          position relative
          top 0
          left 0
          .item-tag
            position absolute
            bottom 10px
            padding-right 10px
            display flex
            flex-wrap wrap
            align-items center
            height 24px
            overflow hidden
            .tag-list
              font-size 12px
              color #ffffff
              line-height 17px
              padding 3px 7px
              background-color rgba(45,50,59,0.35)
              border-radius 3px
              margin-left 10px
              margin-bottom 10px
          .item-bg,img
            width 100%
            height 100%
        .item-con
          padding 22px 15px 0
          height 150px
          position relative
          top 0
          left 0
          .tit
            line-clamp(1)
            font-size 16px
            line-height 22px
            height 22px
            font-weight bold
            color #2D323B
            margin-bottom 16px
          .text-con
            font-size 12px
            line-height 18px
            color #666666
            margin-bottom 15px
            height 36px
            line-clamp(2)
          .list-box
            position absolute
            bottom 23px
            left 15px
            display flex
            align-items center
            .list-item
              display inline-block
              display flex
              align-items center
              margin-right 30px
              font-size 12px
              line-height 17px
              color #666666
              .icon
                margin-right 4px
                display inline-block
              .icon-user
                width 10px
                height 14px
                background url(../../common/image/icon/model-lump-user.png) no-repeat center
                background-size auto 14px
              .icon-look
                width 14px
                height 14px
                background url(../../common/image/icon/model-lump-look.png) no-repeat center
                background-size 14px 14px
        &:nth-of-type(4n)
          margin-right 0
        &:hover
          box-shadow 0 0 10px 0 rgba(74,74,74,0.15)
        &:hover .tit
          color #2196f3
    .upload-table
      .table-con
        font-size 14px
        line-height 20px
        color #57606A
      .elli
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 1
        -webkit-box-orient vertical
        height 20px
      .table-hand
        cursor pointer
      .table-operation
        width 95px
        display flex
        justify-content space-between
        a
          text-decoration none
          color #2196F3
    .look-model
      .look-data-list
        display flex
        flex-wrap wrap
        .look-item
          width 270px
          height 310px
          overflow hidden
          transition all 0.2s linear
          margin-bottom 25px
          margin-right 27px
          border 1px solid #E8E8E8
          border-radius 3px
          cursor pointer
          .item-top
            width 100%
            height 160px
            position relative
            top 0
            left 0
            .item-tag
              position absolute
              bottom 10px
              padding-right 10px
              display flex
              flex-wrap wrap
              align-items center
              height 24px
              overflow hidden
              .tag-list
                font-size 12px
                color #ffffff
                line-height 17px
                padding 3px 7px
                background-color rgba(45,50,59,0.35)
                border-radius 3px
                margin-left 10px
                margin-bottom 10px
            .item-bg,img
              width 100%
              height 100%
          .item-con
            padding 22px 15px 0
            height 150px
            position relative
            top 0
            left 0
            .tit
              line-clamp(1)
              font-size 16px
              line-height 22px
              height 22px
              font-weight bold
              color #2D323B
              margin-bottom 16px
            .text-con
              font-size 12px
              line-height 18px
              color #666666
              height 36px
              margin-bottom 15px
              line-clamp(2)
            .list-box
              position absolute
              bottom 23px
              left 15px
              display flex
              align-items center
              .list-item
                display inline-block
                display flex
                align-items center
                margin-right 30px
                font-size 12px
                line-height 17px
                color #666666
                .icon
                  margin-right 4px
                  display inline-block
                .icon-user
                  width 10px
                  height 14px
                  background url(../../common/image/icon/model-lump-user.png) no-repeat center
                  background-size auto 14px
                .icon-look
                  width 14px
                  height 14px
                  background url(../../common/image/icon/model-lump-look.png) no-repeat center
                  background-size 14px 14px
          &:nth-of-type(4n)
            margin-right 0
          &:hover
            box-shadow 0 0 10px 0 rgba(74,74,74,0.15)
  .loadmore
    display flex
    align-items center
    justify-content center
    height 50px
    .loadmore-box
      height 40px
      line-height 40px
      font-size 16px
      width 50%
      display flex
      align-items center
      justify-content center
      background #f5f7fa
      cursor pointer
  .no-data
    display flex
    align-items center
    justify-content center
.dataset-popover
  width 100%
  display flex
  .navs-detail-left
    flex 0 0 120px
    padding-top 10px
    background #F4F7F8
    .item
      height 32px
      line-height 32px
      text-indent 10px
      font-size 16px
      font-weight 600
      cursor pointer
      &:hover
        // background #d2d2d2
        color #2296f3
    .active
      color #2296f3
  .navs-detail-right
    flex 1
    padding-top 10px
    .items
      width 100%
      display flex
      .tit
        flex 0 0 140px
        height 32px
        line-height 32px
        text-align left
        padding 0 10px
        font-size 14px
        font-weight 600
      .detail-items
        flex 1
        font-size 0
        .detail-item
          display inline-block
          padding-left 6px
          padding-right 6px
          height 32px
          line-height 32px
          font-size 14px
          color #6E6E6E
          cursor pointer
          &:hover
            color #2196f3
        .active-category
          color #2196f3
.dataset-navs-detail
  position relative
  &:after
    content: ''
    position: absolute
    top: 4px
    right: -14px
    display: block
    width: 0
    height: 0
    border-top: 8px solid #8D9091
    border-left: 5px solid transparent
    border-right: 5px solid transparent
</style>
